<template>
  <q-layout view="hHh LpR lff" class="fit">
    <q-header bordered height-hint="48">
      <q-toolbar>
        <q-btn
          dense
          flat
          round
          :icon="leftDrawerOpen ? 'menu_open' : 'menu'"
          @click="toggleLeftDrawer"
        />
        <q-btn flat no-caps no-wrap class="q-ml-xs" v-if="$q.screen.gt.xs">
          <q-icon name="catching_pokemon" size="2rem" />
          <q-toolbar-title shrink class="text-weight-bold">
            W_LF
          </q-toolbar-title>
        </q-btn>
        <head-crumbs v-if="$q.screen.gt.xs"></head-crumbs>
        <q-space />
        <div class="q-gutter-sm row items-center no-wrap">
          <q-btn dense flat round icon="refresh" @click="refreshPage">
            <q-tooltip> 重载页面 </q-tooltip>
          </q-btn>
          <q-btn
            round
            dense
            flat
            color="white"
            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
            @click="$q.fullscreen.toggle()"
            v-if="$q.screen.gt.sm"
          >
          </q-btn>
          <q-btn
            v-if="$q.screen.gt.sm"
            round
            dense
            flat
            color="white"
            icon="fab fa-github"
            type="a"
            href="https://gitee.com/wlf213/wlf-admin"
            target="_blank"
          >
          </q-btn>
          <q-btn
            v-if="$q.screen.gt.sm"
            round
            dense
            flat
            class="text-red"
            type="a"
            href="https://gitee.com/wlf213"
            target="_blank"
          >
            <i class="fa fa-heart fa-2x fa-beat"></i>
          </q-btn>
          <q-btn round dense flat color="white" icon="notifications">
            <q-badge color="red" text-color="white" floating> 5 </q-badge>
            <q-menu>
              <q-list style="min-width: 100px">
                <q-card class="text-center no-shadow no-border">
                  <q-btn
                    label="全部查看"
                    style="max-width: 120px !important"
                    flat
                    dense
                    class="text-indigo-8"
                  ></q-btn>
                </q-card>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn round flat>
            <q-avatar size="26px">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719150601_4401e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685108172&t=232426938cbc64554c6c143fdb13fb4c"
              />
            </q-avatar>
            <q-menu transition-show="scale" transition-hide="scale">
              <q-list dense>
                <q-item v-ripple>
                  <q-item-section avatar>
                    <q-avatar>
                      <img
                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719150601_4401e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685108172&t=232426938cbc64554c6c143fdb13fb4c"
                      />
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>你好, W</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onenProfile">
                  <q-item-section class="text-center">个人主页</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="logout">
                  <q-item-section class="text-center">退出登录</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
        <q-btn
          title="系统设置"
          round
          dense
          flat
          color="white"
          icon="fa-solid fa-gear"
          @click="toggleRightDrawer"
        >
        </q-btn>
      </q-toolbar>

      <head-tab></head-tab>
    </q-header>

    <q-drawer
      show-if-above
      v-model="leftDrawerOpen"
      side="left"
      bordered
      :width="layout.leftDrawerWeight"
    >
      <left-drawer></left-drawer>
    </q-drawer>

    <q-drawer v-model="rightDrawerOpen" side="right" overlay elevated>
      <right-drawer @close-drawer="rightDrawerOpen = false"></right-drawer>
    </q-drawer>

    <q-page-container class="fit">
      <router-view v-slot="{ Component }" v-if="isRouterAlive">
        <transition
          mode="out-in"
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
        >
          <!-- 最多缓存20个页面-->
          <keep-alive :max="20">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
      <q-inner-loading
        :showing="!isRouterAlive"
        label-class="text-primary"
        label="载入中..."
        label-style="font-size: 1.1em"
      />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref, nextTick, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { useAuthStore, useLayoutStore } from 'src/stores/layout-store';
import { useWlfStore } from 'src/stores/w-store';

const HeadTab = defineAsyncComponent(() => import('./componet/HeadTab.vue'));
const HeadCrumbs = defineAsyncComponent(
  () => import('./componet/HeadCrumbs.vue')
);
const LeftDrawer = defineAsyncComponent(
  () => import('./componet/LeftDrawer.vue')
);

const RightDrawer = defineAsyncComponent(
  () => import('./componet/RightDrawer.vue')
);
const leftDrawerOpen = ref(false);
const rightDrawerOpen = ref(false);
const router = useRouter();
const auth = useAuthStore();
const layout = useLayoutStore();
const $q = useQuasar();
const $w = useWlfStore();
const isRouterAlive = ref(true);
const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};

const toggleRightDrawer = () => {
  rightDrawerOpen.value = !rightDrawerOpen.value;
};

const refreshPage = () => {
  isRouterAlive.value = false;
  setTimeout(() => {
    nextTick(() => {
      isRouterAlive.value = true;
    });
  }, 500);
};

const logout = () => {
  auth.token = '';
  router.push('/login');
};

const onenProfile = () => {
  $w.openPage('个人主页', '/comp/userprofile');
};
</script>

<style lang="scss" scoped></style>
